.banner-container{
    width: 1200px;
    height: 400px;
    /* 轮播图居中 rem表示根元素的字体大小 */
    margin: 1rem auto;
    /* 隐藏超出展示容器的内容 */
    overflow: hidden;
    position: relative;
    /* background-color: aquamarine; */
}

.banner-container .banner-img-container{
    /* width是所有图片的宽度之和，高度与图片高度一致
    保证图片能全部存下也不浪费资源 */
    width: 6000px;
    height: 400px;
    overflow: hidden;
    position: absolute;
    /* 开启弹性盒，让图片横向排列 */
    display: flex;
    animation: run 10s ease infinite;
}

.banner-container .banner-img-container img{
    width: 1200px;
    height: 100%;
}
/* 自动轮播 */
/* 动画关键帧 */
@keyframes run{
    0%,10%{
        margin-left: 0;
        /* transform: translate(0); */
    }
    20%,30%{
        margin-left: -1200px;
        /* transform: translate(-1200px); */
    }
    40%,50%{
        margin-left: -2400px;
    }
    60%,70%{
        margin-left: -3600px;
    }
    80%,90%{
        margin-left: -4800px;
    }
    100%{
        margin-left: 0;
    }
}